<template>
  <div class="relative">
    <img class="w-full" src="@/assets/home/流量计.png" alt="" />
    <el-dialog
      title="编辑流量计"
      v-model="isRevealed"
      show-close
      append-to-body
      @close="handleClose"
    >
      <el-form :model="formData" label-width="auto" label-position="left">
        <el-form-item label="设备名称">
          <el-select v-model="formData.index">
            <el-option
              v-for="(item, index) in waterPump"
              :key="item.id as number"
              :value="index"
              :label="item.equipmentName as string"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="handleConfirm">保存</el-button>
        <el-button type="info" @click="handleClose">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { computed, inject, ref, watch } from 'vue'
import { type Graph, Node } from '@antv/x6'
import { useConfirmDialog } from '@vueuse/core'
import { storeToRefs } from 'pinia'
import { useDeviceData } from '@/stores/useWebSocket'
import { ElButton, ElDialog, ElForm, ElFormItem,ElSelect,ElOption } from 'element-plus'
import { handleEdgeAnnotation } from '@/utils/x6/animation'

const { waterPump } = storeToRefs(useDeviceData())

const getNode = inject('getNode') as () => Node
const getGraph = inject('getGraph') as () => Graph
const node = getNode()
node.removePorts()
const graph = getGraph()

const nodeData = ref(node.getData() || {})

const { isRevealed, confirm, reveal, cancel, onConfirm, onReveal } = useConfirmDialog()

node.on('change:data', ({ current }) => {
  reveal(current)
})

const formData = ref<{
  index?: number
}>(node.getData() || { index: 0 })
onReveal((data) => {
  formData.value = data
})

onConfirm((data) => {
  nodeData.value = data
  node.setData(data, { silent: true })
})

const handleClose = function () {
  cancel()
  node.setData(
    {
      dialog: false
    },
    { silent: true }
  )
}
const handleConfirm = function () {
  confirm(node.getData())
}

const { deviceList } = storeToRefs(useDeviceData())
const device = computed(() => {
  return deviceList.value.filter((item) => item.equipmentType === 3)[formData.value?.index || 0]
})

const handleControl = function (isOpen: boolean) {
  console.log(isOpen)
  window.parent.postMessage(
    {
      type: 'pump',
      data: {
        eqId: device.value?.id,
        status: isOpen ? 1 : 2
      }
    },
    '*'
  )
}

const inEdges = function () {
  return graph.getConnectedEdges(node, {
    incoming: true
  })
}

const isOpen = computed(() => {
  return device.value?.pumpStatus === 1
})

const handleEdges = function (isOpen: boolean) {
  const edges = graph.getConnectedEdges(node, {
    outgoing: true
  })
  edges.forEach((edge) => {
    handleEdgeAnnotation(edge, isOpen)
  })
}

watch(device, (d) => {
  handleEdges(isOpen.value && inEdges().some((item) => item.getData()?.isOpen))
})
</script>

<style scoped></style>
